<!-- 交易——>币币交易 -->
<template>
  <div>
    <!-- 头部 -->
    <BBTradingHeader :coinInfo="coinInfo" @showSidePopup="showSidePopup"></BBTradingHeader>
    <!-- 内容，订单 -->
    <BBTradingContent :coinInfo="coinInfo"></BBTradingContent>
    <!-- 币种选择器 -->
    <!-- <CurrencySelector
      v-model:show="showCurrencySelector"
      title="现货行情"
      @select="handleCurrencySelect"
    /> -->
    <!-- 左侧 -->
    <PublicPopup
      :show="showCurrencySelector"
      :direction="`left`"
      @handelClose="handelClose"
      :height="`100%`"
      :width="`80%`"
      :showHeader="false"
      :empty="false"
    >
      <template #emptyContentCustomize>
        <LeftSide @linkTo="linkTo" @close="handelClose"></LeftSide>
      </template>
    </PublicPopup>
  </div>
</template>

<script setup>
import BBTradingHeader from './bbTrading/header/index.vue' // BB header部分
import BBTradingContent from './bbTrading/content/index.vue' // BB 内容部分
import CurrencySelector from '@/components/CurrencySelector/index.vue'
import PublicPopup from '@/components/Popup/public.vue'
import LeftSide from './common/leftSide.vue'
import { showToast } from 'vant'
import { _t18 } from '@/utils/public'
import { setCollect, removeCollect, getCollect } from '@/api/trade'
import { useTradeStore } from '@/store/trade'
const tradeStore = useTradeStore()
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
const $route = useRoute()
const $router = useRouter()
const props = defineProps({
  headerList: {
    type: Array
  },
  symbol: {
    type: String
  }
})

// ✅ 用 computed 实时计算币种信息
const coinInfo = computed(() => {
  const list = tradeStore.spotCoinList || []
  const symbol = $route.query.symbol || 'btc'
  if (!list.length) return {}

  const match = list.find(item => item.coin === symbol)
  return match || list[0] || {}
})

/**
 * 币种信息
 */
// 当前币种信息
// const coinInfo = ref({})
// // 监听路由展示对应币种信息
// watch(
//   () => $route.query.symbol,
//   (val) => {
//     coinInfo.value = tradeStore.spotCoinList.filter((item, index) => {
//       return item.symbol === val
//     })[0]
//   },
//   {
//     deep: true
//   }
// )
// 初始化展示币种信息
const init = () => {
  if ($route.query.symbol) {
    coinInfo.value = tradeStore.spotCoinList.filter((item, index) => {
      return item.symbol === $route.query.symbol
    })[0]
    if (!coinInfo.value) {
      coinInfo.value = tradeStore.spotCoinList[0]
    }
  } else {
    coinInfo.value = tradeStore.spotCoinList[0]
  }
  console.log(coinInfo.value)
}
// init()
onMounted(() => {
  
})
/**
 * 币种选择器
 */
const showCurrencySelector = ref(false)
const showSidePopup = () => {
  showCurrencySelector.value = true
}

const handelClose = () => {
  showCurrencySelector.value = false
}

/** 更换当前路由信息 */
const linkTo = (item, type) => {
  // $route.query.symbol = item
  // $route.query.type = type||$route.query.type
  $router.push({
      path: $route.path,
      query: { 
        ...$route.query,
        symbol: item,
        type: type||$route.query.type
      }
    })
  showCurrencySelector.value = false
  // getHeader()
}

// 处理币种选择
const handleCurrencySelect = (currency) => {
  // 根据选择的币种更新当前币种信息
  const selectedCoin = tradeStore.spotCoinList.find(item => item.symbol === currency.symbol)
  console.log(selectedCoin)
  if (selectedCoin) {
    coinInfo.value = selectedCoin
    // 更新路由参数
    $router.push({
      path: $route.path,
      query: { 
        ...$route.query,
        symbol: selectedCoin.symbol 
      }
    })
  }
  console.log('选择的币种:', currency)
}
</script>

<style lang="scss" scoped>
.line {
  height: 5px;
  background: var(--ex-div-bgColor10);
}
</style>
